<template>
  <el-dialog :title="title"
             :visible.sync="dialogVisible"
             width="40%"
             top="2%">
    <el-form :model="goodForm">
      <el-form-item label="商品名称"
                    :label-width="formLabelWidth">
        <el-input v-model="goodForm.name"
                  class="inp"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="商品售价"
                    :label-width="formLabelWidth">
        <el-input v-model="goodForm.sellPrice"
                  class="inp"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="成品价"
                    :label-width="formLabelWidth">
        <el-input v-model="goodForm.costPrice"
                  class="inp"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="商品状态"
                    :label-width="formLabelWidth">
        <el-select v-model="goodForm.skuStatus"
                   placeholder="请选择商品的状态">
          <el-option label="上架"
                     value="ACTIVE"></el-option>
          <el-option label="下架"
                     value="UNACTIVE"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择菜单"
                    :label-width="formLabelWidth">
        <el-select v-model="goodForm.menuId"
                   placeholder="请选择商品的菜单">
          <el-option :label="item.name"
                     :value="item.id"
                     v-for="(item,index) in menuList"
                     :key="'menu'+index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="简要描述"
                    :label-width="formLabelWidth">
        <el-input v-model="goodForm.remark"
                  type="textarea"
                  class="inp"
                  autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary"
                 @click="operation()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { insert, updateById, getById } from '@/api/good'
import { list } from '@/api/menu'
export default {
  data () {
    return {
      dialogVisible: false,
      title: '提示',
      goodForm: {},
      formLabelWidth: '100px',
      type: null,
      menuList: [],
      tab: {},
      active: 'all'

    }
  },
  created () {

  },
  methods: {
    openForm (type, row, active) {
      this.type = type
      this.active = active
      this.dialogVisible = true
      list({}).then((res) => {
        this.menuList = res.data
        console.log(this.menuList);
      })
      if (type == 'add') {
        this.goodForm = {};
        this.title = '添加商品'
      } else if (type == 'update') {
        getById(row.id).then((res) => {
          this.goodForm = res.data;
        })
        this.title = '修改商品'
      }
    },
    refreshTab () {
      if (this.active === 'all') {
        this.$parent.$refs.tb[0].list(this.active)
      } else if (this.active === 'ACTIVE') {
        this.$parent.$refs.tb[1].list(this.active)
      } else if (this.active === 'UNACTIVE') {
        this.$parent.$refs.tb[2].list(this.active)
      }
    },
    operation () {
      if (this.type == 'add') {
        insert(this.goodForm).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 5 * 1000
          });
          this.refreshTab();
          this.dialogVisible = false;
        });
        this.dialogVisible = false;
      } else if (this.type == 'update') {
        updateById(this.goodForm).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 5 * 1000
          });
          this.refreshTab();
          this.dialogVisible = false;
        })
      }
    }
  }
}
</script>

<style lang="sass" scoped>
.inp
  width: 80%
</style>